<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">提交</button>
</body>
<script>
        const handle = ()=>{
        console.log("向后端发送请求");
    }
    const btn = document.getElementById("btn")
    btn.addEventListener("click",dobounce(handle,1000))         //这里点击事件触发的是匿名函数，而handle的函数是定时器到后自己触发的
    function dobounce(handle,time){                             //所以匿名函数的this指向btn容器，handle的函数的this指向window
        let timer = null                                       //所以匿名函数的this就是btn容器，而我们可以使用call直接将handle函数的this指向btn容器
        return function (){
            clearTimeout(timer)                                  
            timer = setTimeout(()=>{
                handle()
            },time)
        }                                                    //利用定时器延迟发送接口请求，如下一次点击之前接口请求未发送，则清除定时器时间，重新开始记时
    }                                                        //回城，每次重点就要重新记时
</script>                                                    
</html>
